<template>

  <div>
    <el-button type="primary" icon="el-icon-back" @click="$router.back()" size="small">上一页</el-button>
    <div id="xlsxChart" style="width: 100%;height: 600%;"></div>

  </div>
</template>

<script>
  import echarts from "echarts";
  import XLSX from "xlsx";  //引入xlsx
  export default {
    data() {
      return {
        databar:'',
      }
    },


    /* created() {
      this.getDetailsList()
    }, */


    /* 接收groupIdex传来的参数 */
    mounted(){
      this.databar = this.$route.query.b
      this.updateChart()
    },

    methods:{
      //初始化echartInstance对象
      initChart(){
        this.myChart = echarts.init(document.getElementById('xlsxChart'));
      },
      //获取数据
      getData(){},
      //更新图标
      updateChart(){
        const mystring = this.databar.colHeaders
        const sellerName = this.databar.data.map((item) =>{
          return item.A
        })
        console.log("sellerName",sellerName)
        const sellerValue1 = this.databar.data.map((item) =>{
          return item.B
        })
        const sellerValue2 = this.databar.data.map((item) =>{
          return item.C
        })
        const sellerValue3 = this.databar.data.map((item) =>{
          return item.D
        })
        const sellerValue4 = this.databar.data.map((item) =>{
          return item.E
        })
        const sellerValue5 = this.databar.data.map((item) =>{
          return item.F
        })
        const sellerValue6 = this.databar.data.map((item) =>{
          return item.G
        })
        const sellerValue7 = this.databar.data.map((item) =>{
          return item.H
        })
        const sellerValue8 = this.databar.data.map((item) =>{
          return item.I
        })
        const sellerValue9 = this.databar.data.map((item) =>{
          return item.J
        })
        const sellerValue10 = this.databar.data.map((item) =>{
          return item.K
        })
        const option = {
          title: {
            text:'折线图'
          },
          toolbox: {
            feature: {
              saveAsImage: {show: true}
            }
          },
          tooltip: {},
          legend: {},
          xAxis: {
            type:'category',
            data:sellerName
          },
          yAxis: {
            type:'value'
          },
          series: [{
            name: mystring[1],
            type: 'line',
            barGap: 0,
            data: sellerValue1
          },
            {
              name: mystring[2],
              type: 'line',
              barGap: 0,
              data: sellerValue2
            },
            {
              name: mystring[3],
              type: 'line',
              barGap: 0,
              data: sellerValue3
            },
            {
              name: mystring[4],
              type: 'line',
              barGap: 0,
              data: sellerValue4
            },
            {
              name: mystring[5],
              type: 'line',
              barGap: 0,
              data: sellerValue5
            },
            {
              name: mystring[6],
              type: 'line',
              barGap: 0,
              data: sellerValue6
            },
            {
              name: mystring[7],
              type: 'line',
              barGap: 0,
              data: sellerValue7
            },
            {
              name: mystring[8],
              type: 'line',
              barGap: 0,
              data: sellerValue8
            },
            {
              name: mystring[9],
              type: 'line',
              barGap: 0,
              data: sellerValue9
            },
            {
              name: mystring[10],
              type: 'line',
              barGap: 0,
              data: sellerValue10
            },
          ]
        }
        let myChart = echarts.init(document.getElementById('xlsxChart'));
        myChart.setOption(option)
      },

    }

  }
</script>

<style>
</style>
